import {
  AppsO,
  Circle,
  FriendsO,
  HomeO,
  Manager,
  NewspaperO,
  NotesO,
  SettingO,
  ShopO,
} from "@react-vant/icons";
import type { MenuProps } from "antd";
import { Button, Collapse, Dropdown, Popover, Space } from "antd";
import { SetOutline } from "antd-mobile-icons";
import { useEffect, useState } from "react";
import { Provider } from "react-redux";
import { NavLink, Outlet, useNavigate } from "umi";
import store from "../store";
import instance from "../utils/instance";
// PoweroffOutlined
import { useLocation } from "umi";
import menu from "../imgs/menu.svg";
import "../style/Home/index.css";
const { Panel } = Collapse;
type Props = {};
const index = (props: Props) => {
  const items: MenuProps["items"] = [
    {
      key: "2",
      label: <p onClick={CloseCurrent}>关闭当前选项卡</p>,
    },
    {
      key: "3",
      label: <p onClick={CloseOther}>关闭其他选项卡</p>,
    },
    {
      key: "4",
      label: <p onClick={CloseAll}>关闭所有选项卡</p>,
    },
  ];
  //定义登录用户名
  const [username, setusername] = useState("admin");
  const location = useLocation();
  //登录开关定义
  const [loginkg, setloginkg] = useState(false);
  //定义路由函数
  const usestate = useNavigate();
  //定义面包屑数组
  const [arr, setarr] = useState([
    { name: "控制面板", linkTo: "PropertyManagement/PropertyManagement" },
  ]);
  //定义全局下标
  const [QJindex, setqjindex] = useState(0);
  //定义动画开关
  const [animationKg, setanimation] = useState(false);
  const [animationKgimg, setanimationimg] = useState(false);
  //定义数据
  const data: any = [
    {
      name: "设置",
      img: <SettingO />,
      children: [
        {
          name: "核心设置",
          list: [
            {
              name: "站点设置",
              linkTo: "SetupManagement/UpdateCache",
            },
            {
              name: "更多缓存",
              linkTo: "SetupManagement/SiteSetup",
            },
            {
              name: "PC首页管理",
              linkTo: "SetupManagement/PC_homePage",
            },
            {
              name: "手机首页管理",
              linkTo: "SetupManagement/PMD_homePage",
            },
            {
              name: "导航设置",
              linkTo: "SetupManagement/NavigationSettings",
            },
            {
              name: "菜单管理",
              linkTo: "SetupManagement/MenuManagement",
            },
          ],
        },
        {
          name: "管理员",
          list: [
            ,
            {
              name: "管理员管理",
              linkTo: "SetupManagement/AdministratorManagement",
            },
            {
              name: "角色管理",
              linkTo: "SetupManagement/RoleManagement",
            },
          ],
        },
      ],
    },
    {
      name: "模块",
      img: <AppsO />,
      children: [
        {
          name: "模块管理",
          list: [
            {
              name: "地区管理",
              linkTo: "Module/areaManage/areaManage",
            },
            {
              name: "学校管理",
              linkTo: "Module/schoolManage/schoolManage",
            },
            {
              name: "地铁管理",
              linkTo: "Module/subwayManage/subwayManage",
            },
            {
              name: "广告位管理",
              linkTo: "Module/adverManage/adverManage",
            },
            {
              name: "推荐位管理",
              linkTo: "Module/recommendManage/recommendManage",
            },
          ],
        },
        {
          name: "友情链接",
          list: [
            ,
            {
              name: "连接管理",
              linkTo: "Module/linkManage/linkManage",
            },
            {
              name: "链接分类",
              linkTo: "Module/linkCategories/linkCategories",
            },
          ],
        },
        {
          name: "扩展属性",
          list: [
            ,
            {
              name: "筛选条件",
              linkTo: "Module/filterCriteria/filterCriteria",
            },
            {
              name: "属性管理",
              linkTo: "Module/attributeManage/attributeManage",
            },
          ],
        },
      ],
    },
    {
      name: "楼盘",
      img: <NewspaperO />,
      children: [
        {
          name: "楼盘管理",
          list: [
            {
              name: "楼盘列表",
              linkTo: "Tower/TowerList",
            },
            {
              name: "添加楼盘",
              linkTo: "Tower/AddTower",
            },
          ],
        },
        {
          name: "开发商",
          list: [
            ,
            {
              name: "开发商列表",
              linkTo: "Tower/ShoppList",
            },
          ],
        },
        {
          name: "团购管理",
          list: [
            ,
            {
              name: "添加团购",
              linkTo: "Tower/AddTuan",
            },
            {
              name: "团购列表",
              linkTo: "Tower/TuanList",
            },
          ],
        },
      ],
    },
    {
      name: "二手/出租",
      img: <HomeO />,
      children: [
        {
          name: "小区管理",
          list: [
            {
              name: "小区管理",
              linkTo: "DxlPages/Community",
            },
          ],
        },
        {
          name: "二手房",
          list: [
            {
              name: "房源管理",
              linkTo: "DxlPages/Availability",
            },
            {
              name: "添加房源",
              linkTo: "DxlPages/AddAvailability",
            },
          ],
        },
        {
          name: "出租房",
          list: [
            ,
            {
              name: "房源管理",
              linkTo: "DxlPages/AvailabilityTow",
            },
            {
              name: "添加房源",
              linkTo: "DxlPages/AddAvailabilityTow",
            },
          ],
        },
      ],
    },
    {
      name: "商业",
      img: <ShopO />,
      children: [
        {
          name: "写字楼",
          list: [
            {
              name: "出售管理",
              linkTo: "Commerce/Tab",
            },
            {
              name: "出租管理",
              linkTo: "Commerce/Tabb",
            },
          ],
        },
        {
          name: "商铺",
          list: [
            {
              name: "出售管理",
              linkTo: "Commerce/Tabc",
            },
            {
              name: "出租管理",
              linkTo: "Commerce/Tabd",
            },
          ],
        },
      ],
    },
    {
      name: "内容",
      img: <NotesO />,
      children: [
        {
          name: "采集管理",
          list: [
            {
              name: "采集管理",
              linkTo: "Content/collection",
            },
          ],
        },
        {
          name: "文章管理",
          list: [
            {
              name: "文章分类",
              linkTo: "Content/articleclass",
            },
            {
              name: "文章列表",
              linkTo: "Content/articlelist",
            },
            {
              name: "增加文章",
              linkTo: "Content/addarticle",
            },
            {
              name: "回收站",
              linkTo: "Content/recyclebin",
            },
          ],
        },
        {
          name: "单页面管理",
          list: [
            ,
            {
              name: "单页面列表",
              linkTo: "Content/singlepagelist",
            },
            {
              name: "分类管理",
              linkTo: "Content/sortmanagement",
            },
          ],
        },
      ],
    },
    {
      name: "用户",
      img: <Manager />,
      children: [
        {
          name: "用户管理",
          list: [
            {
              name: "模块配置",
              linkTo: "moduleConfiguration/moduleConfiguration",
            },
            {
              name: "用户分类",
              linkTo: "UserClassification/UserClassification",
            },
            {
              name: "添加用户",
              linkTo: "addUser/addUser",
            },
          ],
        },
        {
          name: "评论管理",
          list: [
            {
              name: "经纪人点评",
              linkTo: "BrokerComments/BrokerComments",
            },
            {
              name: "楼盘点评",
              linkTo: "PropertyReview/PropertyReview",
            },
          ],
        },
        {
          name: "预约管理",
          list: [
            ,
            {
              name: "预约管理",
              linkTo: "BookingManagement/BookingManagement",
            },
          ],
        },
        {
          name: "问答管理",
          list: [
            ,
            {
              name: "问答列表",
              linkTo: "AnswerList/AnswerList",
            },
          ],
        },
      ],
    },
    {
      name: "加盟",
      img: <FriendsO />,
      children: [
        {
          name: "加盟管理",
          list: [
            {
              name: "公司管理",
              linkTo: "Join/CompanyManagement",
            },
            {
              name: "代理级别",
              linkTo: "Join/AgentLevel",
            },
            {
              name: "菜单管理",
              linkTo: "Join/MenuManagement",
            },
          ],
        },
      ],
    },
    {
      name: "客服",
      img: <Manager />,
      children: [
        {
          name: "客服信息总览",
        },
        {
          name: "客服列表",
        },
        {
          name: "会话管理",
          list: [
            {
              name: "游客列表",
              linkTo: "CustomerService/VisitorList",
            },
            {
              name: "服务记录",
              linkTo: "CustomerService/ServiceRecord",
            },
            {
              name: "聊天记录",
              linkTo: "CustomerService/ChatRecord",
            },
          ],
        },
      ],
    },
  ];
  //定义动态值
  const [kg, setkg] = useState(false);
  //定义动态下标
  const [indexLei, setindexLei] = useState(0);
  const [indexId, setindexId] = useState(-1);
  //关闭弹出层
  function colos() {
    //取反切换开关
    setkg(!kg);
  }
  //监听折叠菜单
  const onChange = (key: string | string[]) => {
    setkg(false);
  };
  //关闭所有选项卡
  function CloseAll() {
    setindexLei(0);
    setarr([
      { name: "控制面板", linkTo: "PropertyManagement/PropertyManagement" },
    ]);
    usestate("PropertyManagement/PropertyManagement");
  }
  //关闭当前选项卡
  function CloseCurrent() {
    if (indexLei != 0) {
      //浅拷贝
      let brr = [...arr];
      //判断下标位置，更改最后一位高亮
      if (indexLei == brr.length - 1) {
        //删除当前下标数据
        brr.splice(indexLei, 1);
        setarr(brr);
        //当删除下标为最后一位时，高亮更改为前一下标
        setindexLei(indexLei - 1);
        //跳转为前一路由
        usestate(brr[indexLei - 1].linkTo);
      } else {
        //删除当前下标数据
        brr.splice(indexLei, 1);
        setarr(brr);
        usestate(brr[indexLei].linkTo);
      }
    } else {
      //禁止删除默认选项卡
      alert("默认选项不支持删除");
    }
  }
  //关闭其他选项卡
  function CloseOther() {
    //浅拷贝
    let newarr = [
      { name: "控制面板", linkTo: "PropertyManagement/PropertyManagement" },
    ];
    let brr = [...arr];
    //截取需要的,拼接
    if (indexLei >= 1) {
      setarr([...newarr, ...brr.slice(indexLei, indexLei + 1)]);
      //更改高亮下标
      setindexLei(1);
    } else {
      setarr(newarr);
      setindexLei(0);
      usestate("PropertyManagement/PropertyManagement");
    }
  }
  //更新缓存
  function uprouter() {
    //声明
    let routercmn = { name: "更新缓存", linkTo: "liveBroadcast/liveBroadcast" };
    //添加顶部面包屑数据
    let brr = [...arr];
    let some = brr.some((it) => it.name == routercmn.name);
    //判断是否已经存在不存在添加否则不执行
    if (!some) {
      //不存在添加跳转，更改高亮
      brr.push(routercmn);
      setarr(brr);
      usestate(routercmn.linkTo);
      setindexLei(brr.length - 1);
    } else {
      //存在直接跳转，更改高亮
      usestate(routercmn.linkTo);
      //循环查找下标
      for (let index = 0; index < brr.length - 1; index++) {
        if (brr[index].name == routercmn.name) {
          setindexLei(index);
        }
      }
    }
  }
  //跳转路由，切换下标
  function JumpRoute(index: any) {
    //赋值
    setqjindex(index);
    setindexId(index);
  }
  //左侧标签栏路由跳转
  function JumpRouteTwo(item: any) {
    let crr = [...arr];
    setindexLei(crr.length);
    //添加顶部面包屑数据
    let brr = [...arr];
    let some = brr.some((it) => it.name == item.name);
    //判断是否已经存在不存在添加否则不执行
    if (!some) {
      brr.push(item);
      setarr(brr);
    } else {
      //获取存在时下标
      for (let i = 0; i < brr.length; i++) {
        if (brr[i].name == item.name) {
          //高亮更改
          setindexLei(i);
        }
      }
    }
  }
  //面包屑路由删除
  function deleteRouter(item: any, index: any) {
    //浅拷贝
    let brr = [...arr];
    //当删除下标等于高亮时
    if (index == indexLei) {
      //当删除下标等于最大下标时
      if (index == brr.length - 1) {
        //高亮下标减少
        setindexLei(indexLei - 1);
        //路由跳转为前一路由
        usestate(brr[indexLei - 1].linkTo);
      } else {
        //当删除下标小于最大下标时
        //高亮下标不变自动改为下一路由
        setindexLei(indexLei);
        //跳转路由为后一路由
        usestate(brr[indexLei + 1].linkTo);
      }
      //当删除下标不等于高亮时
    } else if (index != indexLei) {
      //当删除下标小于高亮下标时
      if (index < indexLei) {
        //高亮下标前移
        setindexLei(indexLei - 1);
        //路由不变
        usestate(brr[indexLei].linkTo);
      } else {
        //当删除下标大于高亮下标时
        //高亮下标不变
        setindexLei(indexLei);
        //路由不变
        usestate(brr[indexLei].linkTo);
      }
    }
    //删除
    brr.splice(index, 1);
    setarr(brr);
  }
  //更改类名跳转路由
  function Toindex(item: any, index: number) {
    //更改下标
    setindexLei(index);
    //跳转
    usestate(item);
  }
  //关闭动画
  function lmkdaw() {
    setanimation(false);
    window.localStorage.setItem("animation", "animation");
  }
  //注销登录
  function loginzhuxiao() {
    window.localStorage.removeItem("token");
    window.location.reload();
  }
  //登录
  function login() {
    //获取本地token请求头
    let token = window.localStorage.getItem("token");
    //不存在跳转登录页
    if (!token) {
      usestate("Login/Login");
    }
  }
  useEffect(() => {
    //锁屏动画
    usestate("PropertyManagement/PropertyManagement");
    let animation = window.localStorage.getItem("animation");
    if (!animation) {
      setanimation(true);
      setTimeout(() => {
        setanimationimg(true);
      }, 2000);
    }
    //判断是否存在登录token
    let token = window.localStorage.getItem("token");
    //判断登陆状态
    if (token) {
      //调用登陆接口上传本地存储失效时间
      let msg = JSON.parse(token);
      let obj = { msg };
      instance.post("/api/Longin", obj).then((res) => {
        //判断后端返回值
        if (res.data.message == "未过期") {
          //未过期时更改登陆状态
          setloginkg(true);
        } else {
          //过期时
          //清空登陆本地token
          window.localStorage.removeItem("token");
          //刷新页面更改登陆状态
          window.location.reload();
          setloginkg(false);
        }
      });
    } else {
      //当本地不存在token时改变登陆状态
      setloginkg(false);
    }
  }, []);
  return (
    <Provider store={store}>
      <div>
        <div className="header">
          <h1>后台管理中心</h1>
          <div className="Login">
            {/* 头部路由 */}
            <div className="loginl">
              {data.map((item: any, index: number) => {
                return (
                  <div
                    key={index}
                    className="pingxing"
                    //跳转方法
                    onClick={() => JumpRoute(index)}
                    id={indexId == index ? "act" : ""}
                  >
                    <span>{item.img}</span>
                    <span> {item.name}</span>
                  </div>
                );
              })}
            </div>
            {/* 登录 */}
            <div className="loginr">
              <p onClick={uprouter}>更新缓存</p>
              <p>网站首页</p>
              <p
                style={{
                  overflow: "hidden",
                  width: "5.5vw",
                  textAlign: "center",
                }}
              >
                <span
                  className="gfawda"
                  style={{ display: loginkg ? "" : "block" }}
                >
                  未登录
                </span>
                <span
                  className="gfawda"
                  style={{ display: loginkg ? "block" : "" }}
                >
                  欢迎您，{username}
                </span>
              </p>
              <p
                className="gfawda"
                onClick={loginzhuxiao}
                style={{ display: loginkg ? "block" : "" }}
              >
                <SetOutline />
                注销
              </p>
              <p
                className="gfawda"
                onClick={login}
                style={{ display: loginkg ? "" : "block" }}
              >
                <SetOutline />
                去登陆
              </p>
            </div>
          </div>
        </div>
        <div className="main">
          <div className="left" style={{ width: kg ? "40px" : "" }}>
            <div
              className="colose"
              onClick={colos}
              style={{ width: kg ? "40px" : "" }}
            >
              <img src={menu} alt="" />
            </div>
            <div className="Listget">
              {/* 渲染左侧列表 */}
              <Collapse
                onChange={onChange}
                className="mkk"
                style={{ width: "100vw" }}
              >
                {/* 渲染标签栏 */}
                {data[QJindex].children.map((item: any, index: number) => {
                  return (
                    <Panel header={item.name} key={index + 1000}>
                      {/* 判断当子元素不存在不进行渲染 */}
                      {data[QJindex].children[index].list
                        ? data[QJindex].children[index].list.map(
                            (item: any, index: number) => {
                              return (
                                //气泡提示
                                <NavLink to={item.linkTo} key={index + 8555}>
                                  <Popover
                                    style={{ display: item.name ? "none" : "" }}
                                    placement="right"
                                    title={item.name}
                                  >
                                    {/* 渲染二级数据 */}
                                    <div
                                      className="quanxian"
                                      onClick={() => JumpRouteTwo(item)}
                                      style={{ color: "#000" }}
                                    >
                                      <span>
                                        <Circle />
                                      </span>
                                      <span>{item.name}</span>
                                    </div>
                                  </Popover>
                                </NavLink>
                              );
                            }
                          )
                        : ""}
                    </Panel>
                  );
                })}
              </Collapse>
            </div>
          </div>
          <div className="right" style={{ width: kg ? "97.5vw" : "" }}>
            <div className="headerc" style={{ width: kg ? "97.5vw" : "" }}>
              <div className="tophea" style={{ width: kg ? "91.6vw" : "" }}>
                {/* 渲染顶部面包屑 */}
                {arr
                  ? arr.map((item, index) => {
                      return (
                        <div
                          key={index + 4846}
                          className="kongzhi"
                          id={indexLei == index ? "active" : ""}
                        >
                          <span>
                            <Circle />
                          </span>
                          {/* 点击切换下标 */}
                          <span onClick={() => Toindex(item.linkTo, index)}>
                            {item.name}
                          </span>
                          <span
                            style={{ display: index == 0 ? "none" : "" }}
                            //面包屑路由删除
                            onClick={() => deleteRouter(item, index)}
                          >
                            {index == 0 ? "" : "X"}
                          </span>
                        </div>
                      );
                    })
                  : ""}
              </div>
              {/* 操作 */}
              <div className="topRight">
                <Space direction="vertical">
                  <Space wrap>
                    <Dropdown menu={{ items }} placement="bottom">
                      <Button
                        id="Button-hover"
                        style={{
                          width: "6vw",
                          height: "5vh",
                          borderRadius: "0",
                          border: "none",
                        }}
                      >
                        操作
                      </Button>
                    </Dropdown>
                  </Space>
                </Space>
              </div>
            </div>
            <Outlet></Outlet>
          </div>
        </div>
        {/* 左侧动画 */}
        <div
          className="left-animation"
          style={{ width: animationKg ? "50vw" : "0" }}
        >
          <div className="left-animation-body">
            <button
              style={{ opacity: animationKgimg ? ".7" : "0" }}
              onClick={lmkdaw}
            >
              开启
            </button>
          </div>
        </div>
        {/* 右侧动画 */}
        <div
          className="right-animation"
          style={{ width: animationKg ? "50vw" : "0" }}
        >
          <div className="right-animation-body">
            <button
              style={{ opacity: animationKgimg ? ".7" : "0" }}
              onClick={lmkdaw}
            >
              开启
            </button>
          </div>
        </div>
      </div>
    </Provider>
  );
};

export default index;
